<template>
	<uv-popup ref="popup" :closeOnClickOverlay="false" overlayOpacity="0.8" bgColor="none" mode="center">
		<view class="cs-popup">
			<view class="cs-box">
				<view class="bt-title">
					{{title}}
				</view>
				<view class="list">
					<view class="l-item uv-flex" v-for="item in list">
						<view class="l-left">
							<view class="l-name">{{item.curator}}</view>
							<view class="l-time">{{item.time}}</view>
						</view>
						<view class="l-right">{{item.title}}</view>
					</view>
				</view>
			</view>
		
			<view @click="closePopup" class="close-btn">
				<image src="/static/images/close-ico.png" mode=""></image>
			</view>
		</view>
	</uv-popup>
</template>

<script setup>
	import { getCurrentInstance, watch } from 'vue';
	let props = defineProps({
		list:{
			type:Array,
			default:[]
		},
		title:{
			type:String,
			default:''
		},
		showPopup:{
			default:false
		}
	})
	let modelValue = defineModel();
	const { proxy, ctx } = getCurrentInstance();
	const closePopup = ()=>{
		ctx.$refs?.popup?.close();
		modelValue.value = false
	}
	watch(
		()=>modelValue.value,
		(val)=>{
			if(val){
				ctx.$refs?.popup?.open();
			}else{
				closePopup()
			}
		},
		
	)
	onMounted(() => {
		
		
	});
</script>

<style lang="scss" scoped>
	.cs-popup{
		height:940rpx;
		position:relative;
		.cs-box{
			width: 624rpx;
			height: 812rpx;
			background: #FFF2E8;
			border-radius: 32rpx 32rpx 32rpx 32rpx;
			border: 4rpx solid #0C6F6A;
		}
		.close-btn{
			position:absolute;
			bottom:0rpx;
			left:50%;
			transform: translateX(-50%);
			width:64rpx;
			height:64rpx;
			z-index: 9;
			image{
				width:100%;
				height:100%;
			}
		}
		.bt-title{
			background: url('/static/images/bt-bg.png') no-repeat;
			background-size:100% 100%;
			font-weight: 600;
			font-size: 32rpx;
			color: #FFFFFF;
			width:440rpx;
			height:66rpx;
			line-height:66rpx;
			text-align: center;
			margin:0 auto;
		}
		.list{
			margin-top:20rpx;
			height:700rpx;
			overflow: auto;
			// background-color: red;
		}
		.l-item{
			justify-content: space-between;
			padding:30rpx;
			border-bottom:1rpx solid #ccc;
			.l-name{
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
			}
			.l-time{
				font-weight: 400;
				font-size: 24rpx;
				color: #000000;
			}
			.l-right{
				font-weight: 600;
				font-size: 32rpx;
				color: #0C6F6A;
			}
		}
	}
</style>